<template>
	<view class="seckill-goods-item bg-white e-flex e-m-b-20 e-p-20" v-if="info">
		<view class="e-rela">
			<load-image mode="aspectFill" :size="['200rpx','194rpx']"  radius="10rpx"  :src="info.coverImg">
			</load-image>
			<view class="e-abso sell-out-mask e-flex e-flex-xy-center" v-if="info.buyStock === info.stock">
				<view class="sell-out-box">
					<text class="e-font-24 c-white">{{$t('seckill.bhz')}}</text>
				</view>
			</view>
		</view>
		
		<view class="e-m-l-20 e-flex-1">
			<view class="e-m-b-20">
				<text class="e-line-2">{{info.productName}}</text>
			</view>
			<view class="e-m-b-20 progress-bar e-flex" v-if="info.buyStock !== info.stock">
				<view class="bar" :style="{width: `${(info.stock - info.buyStock) / info.stock * 100}%`, background:AppSkin.gradientPrimary}"></view>
				<text class="e-font-20 c-white e-p-l-10 e-rela z-index2">
					{{$t('seckill.only')}} {{((info.stock - info.buyStock) / info.stock * 100).toFixed(0)}}%
				</text>
			</view>
			<view class="e-m-b-20 h-28" v-else>
				
			</view>
			<view class="e-flex e-flex-between">
				<view class="price fw-600 c-red">
					<text class="e-font-24">{{$unitEn}}</text>
					<text class="e-font-32">{{ info.price }}</text>
				</view>
				<view v-if="info.buyStock !== info.stock" class="snapup-btn e-font-26 c-white" :style="{background:AppSkin.primary}" @tap="
						$goTo('/pages/classify/goods/info/index',  {
							id: info.productId,
							skuId: info.skuId
						})
					">{{$t('seckill.snapup')}}</view>
				<view v-else class="grey-btn snapup-btn c-white e-font-26">
					{{$t('seckill.snapup')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { useInit } from '@/common/stores'
	import { mapState } from 'pinia'
	import {
		defineComponent
	} from 'vue'
	export default defineComponent ({
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
		props: {
			info: Object
		},
		computed: {
			 ...mapState(useInit, ['AppSkin'])
		},
	})
</script>

<style lang="scss">
	.seckill-goods-item {
		border-radius: 10rpx;
	}
	.snapup-btn {
		border-radius: 25rpx;
		display: inline-block;
		padding: 8rpx 16rpx 8rpx 18rpx;
	}
	.h-28 {
		width: 228rpx;
		height: 28rpx;
	}
	.progress-bar {
		width: 228rpx;
		height: 28rpx;
		background: rgba(245,34,45,0.1);
		border-radius: 14rpx;
		position: relative;
		.bar {
			position: absolute;
			left: 0;
			height: 28rpx;
			line-height: 28rpx;
			border-radius: 14rpx;
			padding-left: 10rpx;
			z-index: 1;
		}
		.z-index2 {
			z-index: 2;
		}
	}
	.grey-btn {
		background: #989898;
	}
	.sell-out-mask {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 0.5);
		.sell-out-box {
			background-color: rgba(0, 0, 0, 0.5);
			padding: 8rpx 32rpx;
			border-radius: 32rpx;
		}
	}
</style>